<template>
  <div>
    <h1>elementUI 入门案例 方便大家后续学习</h1>

    <!-- 1.面包屑导航
       elementUI 提供的组件 Breadcrumb
                           BreadcrumbItem
         2.引入组件         element.js  import  Vue.use
     -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/elementUI' }">UI页面</el-breadcrumb-item>
      <el-breadcrumb-item>ElementUI工具API</el-breadcrumb-item>
      <el-breadcrumb-item>入门案例</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 2. 定义卡片视图 -->
    <el-card class="box-card hwCard">

        <!-- 4. 栅格: 将一行固定划分为24块 可以调整每块所占的大小   -->
        <el-row gutter="15">
          <el-col :span="8">
              <!-- 3.引入input框 -->
              <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
          </el-col>
          <el-col :span="4">
              <el-button type="primary" round @click="showDialog" >点击按钮</el-button>
          </el-col>
        </el-row>

        <!-- 5.弹出框操作
          title="弹出框的标题元素"
          :visible.sync="dialogVisible"  控制弹出框是否展现 true/false
        -->
        <el-dialog
          title="弹出框效果展现"
          :visible.sync="dialogVisible"
          width="70%">

          <!-- 6.表单提交  ref="为表单定义一个ID"
            model 是elementUI中特定的属性   负责绑定数据
          -->
          <el-form ref="form" :model="addUser" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="addUser.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="addUser.password" type="password"></el-input>
            </el-form-item>
          </el-form>



          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>


        <!-- 图片上传操作
           file-list="fileList"  双向数据绑定 控制图片的数量数组结构[],
           :on-preview="handlePreview"  点击图片时候调用的函数
           :on-remove="handleRemove"    当用户点击删除按钮时,触发函数
           multiple 配置多选
           drag   是否启用拖拽
           action="图片提交的地址信息"
         -->
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
          multiple
          drag>
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>



    </el-card>




  </div>
</template>

<script>
//对外声明 当前组件的属性export default 将组件交给VUE对象管理
export default {
  data(){
    return {
      dialogVisible: false,
      //form表单中的数据有多个所以采用对象
      addUser: {
          username: '',
          password: ''
      },
       fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    }
  },
  methods: {
    //添加点击事件
    showDialog(){
       //点击展现弹出框???
       this.dialogVisible = true
    },
    handleRemove(file, fileList) {
          console.log(file, fileList);
    },
    handlePreview(file) {
      console.log("点击图片,执行回调函数")
    }
  }
}
</script>

<style lang="less" scoped>

  .hwCard {
    width: 100%;
    height: 500px;
  }
</style>